<!--
 * @Date: 2021-09-02 11:32:14
 * @Author: 陶子
 * @LastEditTime: 2023-06-19 15:03:12
 * @FilePath: \jk_one-stop_pc\src\views\bigView\productionProcess\fullView.vue
 * @pageName: 这是--（工单进度大屏滚动列表）--页面
-->
<template>
  <div class="outBox">
    <vue-seamless-scroll :data="listData" class="seamless-warp" @ScrollEnd="ScrollEnd" :class-option="defaultOption">
      <div class="itemBorderBox" v-for="itemParent in listData" :key="itemParent.id">
        <div class="itemBox">
          <div class="itemLeft">
            <div class="leftTopBox">
              <div class="leftTopBox_left">{{ itemParent.orderCode }}</div>
              <div class="leftTopBox_right">计划完成日期：{{ itemParent.planEndTime }}</div>
            </div>
            <div class="leftSecondBox">
              <div class="leftSecondBox_left">生产产品：</div>
              <div class="leftSecondBox_Right">
                {{
                  itemParent.serialNumber + '-' + itemParent.serialName + '-' + (itemParent.serialSpecifications || '-')
                }}
              </div>
            </div>
            <div class="rightCenter">
              <div
                class="centerChart"
                :style="{ width: (itemParent.productQualifiedCount / itemParent.planProduceNum) * 100 + '%' }"
              ></div>
              <div class="centerBar">
                <div
                  class="barI"
                  v-for="i in 6"
                  :key="i + 'xyz'"
                  v-show="showI(itemParent.productQualifiedCount / itemParent.planProduceNum, i)"
                ></div>
                <div class="barNum">{{ numFormat(itemParent.productQualifiedCount) }}</div>
              </div>
            </div>
            <div class="leftThirdBox">
              <div class="leftThirdBox_left">
                <span>计划生产</span><span class="blueColor">{{ numFormat(itemParent.planProduceNum) }}</span>
              </div>
              <div class="leftThirdBox_right">
                <span>已生产</span><span class="greenColor">{{ numFormat(itemParent.productQualifiedCount) }}</span>
              </div>
            </div>
            <div class="leftLastBox">
              <div class="tagBox_Over" v-if="itemParent.expiryTime > 0">逾期{{ itemParent.expiryTime }}天</div>
              <div class="tagBox_off" v-else>{{ +itemParent.offDay || 0 }}天后到期</div>
            </div>
          </div>
          <div class="itemRight">
            <div class="rightItemBox" v-for="itemSon in itemParent.processesVos" :key="itemSon.id">
              <div class="rightItemBox_right">
                <div class="rightItemBox_rightTop">{{ itemSon.processesName }}</div>
                <div class="rightItemBox_rightBot">
                  <div class="rightBot_one"><span>合格：</span>{{ numFormat(itemSon.qualifiedCount) }}</div>
                  <div class="rightBot_one"><span>生产：</span>{{ numFormat(itemSon.produceCount) }}</div>
                  <div class="rightBot_one"><span>计划：</span>{{ numFormat(itemSon.processesPlanProduceNum) }}</div>
                </div>
              </div>
              <div class="rightItemBxo_left">
                <div class="mycircle"></div>
                <a-progress
                  type="circle"
                  :percent="((itemSon.produceCount / itemSon.processesPlanProduceNum) * 100).toFixed(2)"
                  :width="80"
                  :strokeWidth="6"
                  :strokeColor="checkStockColor(itemSon.produceCount / itemSon.processesPlanProduceNum)"
                >
                  <div slot="format" class="circletext">
                    {{ `${((itemSon.produceCount / itemSon.processesPlanProduceNum) * 100).toFixed(2)}%` }}
                    <div>完成率</div>
                  </div>
                </a-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { numFormat } from '@/utils/util'
import { getProgressListBigScreen, queryByKey } from '@/api/productOrder'
export default {
  components: {},
  watch: {},
  data() {
    return {
      numFormat,
      startScrollNum: 3,
      listData: [],
      resData: [],
      timeOut: 0,
      seter: null,
    }
  },
  computed: {
    defaultOption() {
      let startScrollNum = this.startScrollNum
      return {
        step: 0.15, // 数值越大速度滚动越快
        limitMoveNum: startScrollNum, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.seter)
  },
  created() {
    this.getData()
    let timeObj = {
      key: 'bigScreenRefreshTime',
    }
    queryByKey(timeObj).then((res) => {
      if (res.code == 200) {
        this.timeOut = res.result
        this.createSet()
      } else {
        this.$antdMessage.error(res.message)
      }
    })
  },
  methods: {
    showI(num, index) {
      if (!num) {
        return false
      } else {
        let i = index
        return num / (i * 14.28) >= 1
      }
    },
    getData() {
      getProgressListBigScreen().then((res) => {
        if (res.code == 200) {
          this.listData = res.result
          this.computedScrollNum(this.listData)
        } else {
          this.$antdMessage.error(res.message)
        }
      })
    },
    createSet() {
      this.seter = setInterval(() => {
        this.resData = []
        getProgressListBigScreen().then((res) => {
          if (res.code == 200) {
            this.resData = res.result
            if (this.listData.length < 5) {
              this.listData = JSON.parse(JSON.stringify(this.resData))
              this.resData = []
              this.computedScrollNum(this.listData)
            }
          } else {
            this.$antdMessage.error(res.message)
          }
        })
      }, this.timeOut)
    },
    ScrollEnd() {
      if (this.resData.length > 0) {
        this.listData = JSON.parse(JSON.stringify(this.resData))
        this.resData = []
        this.computedScrollNum(this.listData)
        this.$forceUpdate()
      }
    },
    computedScrollNum(checkData) {
      if (checkData.length > 4) {
        this.startScrollNum = checkData.length
      } else {
        let childrenLength = 0
        let moreNumber = 0
        for (let item of checkData) {
          childrenLength += item.progressList.length
          if (item.progressList.length > 5) {
            moreNumber++
          }
        }
        if (moreNumber > 0) {
          if (childrenLength > 25) {
            this.startScrollNum = checkData.length
          } else {
            this.startScrollNum = checkData.length + 1
          }
        } else {
          this.startScrollNum = checkData.length + 1
        }
      }
      this.$forceUpdate()
    },
    checkStockColor(colorNum) {
      let numValue = ''
      if (colorNum == 0) {
        numValue = '#D3D3D3'
      } else if (100 > colorNum > 0) {
        numValue = '#2478f1'
      } else if (colorNum == 100) {
        numValue = '#26a947'
      } else {
        numValue = '#fe2525'
      }
      return numValue
    },
  },
}
</script>

<style scoped lang="less">
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.itemBorderBox {
  margin-top: 0.25rem;
}
.outBox {
  box-sizing: border-box;
  padding: 0 0.23rem;
  height: 100%;
  div.itemBox {
    box-sizing: border-box;
    padding: 0.5rem 0.7rem 0.28rem 0.28rem;
    background-image: url('~@/assets/img/screen-p10.png');
    background-size: 100% 100%;
    background-position: center center;
    .flex(space-between,flex-start);
    div.itemLeft {
      width: 4.95rem;
      margin-right: 0.38rem;
      div.leftTopBox {
        .flex(space-between,center);
        font-size: 0.18rem;
        color: #ffffff;
        font-family: Microsoft YaHei;
        margin-bottom: 0.13rem;
        div.leftTopBox_left {
          font-size: 0.18rem;
          font-weight: bold;
        }

        div.leftTopBox_right {
          // .flex(flex-end,center);
          flex: 1;
          text-align: right;
        }
      }

      div.leftSecondBox {
        .flex(flex-start,flex-start);
        margin-bottom: 0.1rem;
        font-size: 0.14rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
        // div.leftSecondBox_left {
        // }

        div.leftSecondBox_Right {
          flex: 1;
        }
      }

      div.rightCenter {
        border: 1px solid #91a9ff;
        height: 0.5rem;
        width: 100%;
        padding: 0.05rem 0.08rem 0.05rem 0.05rem;
        display: flex;
        align-items: center;
        position: relative;
        margin-bottom: 0.1rem;
        .centerChart {
          height: 0.3rem;
          display: flex;
          background-image: linear-gradient(to right, rgba(75, 243, 249, 0), rgba(75, 243, 249, 1));
          position: absolute;
          z-index: 1;
        }
        .centerBar {
          width: 100%;
          height: 0.3rem;
          display: flex;
          z-index: 2;
        }
        .barNum {
          height: 0.5rem;
          position: absolute;
          right: 0;
          padding-right: 0.08rem;
          font-size: 0.18rem;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #ffffff;
        }
        .barI {
          height: 100%;
          width: 14.28%;
          border-right: 0.1rem solid #011753;
        }
      }

      div.leftThirdBox {
        .flex(space-between,center);
        margin-bottom: 0.1rem;
        div.leftThirdBox_left {
          font-size: 0.14rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          span.blueColor {
            font-size: 0.18rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #4bf3f9;
            margin-left: 0.1rem;
            text-shadow: 0 0 0.1rem #4bf3f9, 0 0 0.02rem #4bf3f9, 0 0 0 #4bf3f9, 0 0 0 #4bf3f9;
          }
        }

        div.leftThirdBox_right {
          .flex(flex-start,center);
          width: 2.27rem;
          font-size: 0.14rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          span.greenColor {
            margin-left: 0.1rem;
            font-size: 0.18rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #4bf3f9;
            text-shadow: 0 0 0.1rem #4bf3f9, 0 0 0.02rem #4bf3f9, 0 0 0 #4bf3f9, 0 0 0 #4bf3f9;
          }
        }
      }

      div.leftLastBox {
        .flex(flex-start,center);
        font-size: 0.18rem;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #ffffff;
        .tagBox_Over {
          .flex(center,center);
          padding: 0.1rem;
          background-color: #eb2144;
          border-radius: 0.04rem;
        }
        .tagBox_off {
          .flex(center,center);
          padding: 0.1rem;
          background-color: #f6c223;
          border-radius: 0.04rem;
        }
      }
    }

    div.itemRight {
      flex: 1;
      .flex(flex-start,flex-start);
      flex-wrap: wrap;
      div.rightItemBox:nth-of-type(n + 5) {
        margin-top: 0.3rem;
      }
      div.rightItemBox {
        width: 4rem;
        height: 1.85rem;
        background-image: url('~@/assets/img/screen-p11.png'), url('~@/assets/img/screen-p12.png');
        background-size: 100% 100%;
        background-position: center center;
        .flex(space-between,center);
        box-sizing: border-box;
        padding: 0.2rem 0.4rem 0.2rem 0.2rem;
        // margin-bottom: 0.2rem;
        margin-right: 0.33rem;
        div.rightItemBxo_left {
          margin-right: 0.15rem;
          position: relative;
          .mycircle {
            width: 59px;
            height: 59px;
            border: solid 2px #91a9ff;
            border-radius: 50%;
            position: absolute;
            left: 10.5px;
            top: 10.5px;
          }
          .circletext {
            font-size: 0.26rem;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            color: #ffffff;
            div {
              margin-top: 5px;
              font-size: 0.15rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #e7edf2;
            }
          }
          a-progress {
            width: 1rem;
            height: 1rem;
          }
        }

        div.rightItemBox_right {
          .flex(space-between, flex-start,column);
          height: 100%;
          div.rightItemBox_rightTop {
            font-size: 0.16rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #e7edf2;
          }

          div.rightItemBox_rightBot {
            flex: 1;
            padding-top: 0.15rem;
            .flex(space-between, flex-start,column);
            div.rightBot_one {
              font-size: 0.2rem;
              font-family: Alimama ShuHeiTi;
              font-weight: bold;
              color: #1ff6fe;
              span {
                font-size: 0.14rem;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #e7edf2;
                margin-left: 0.16rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.seamless-warp {
  height: 100%;
  overflow: hidden;
}
.ant-progress-text {
  font-size: 0.18rem;
  color: #ffffff !important;
}
.ant-progress-circle-trail {
  stroke: #888888 !important;
}
</style>
